<template>
  <div v-show="!dialogVisible">
    <el-card>
      <div class="top-search">
        <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="采矿权" name="first"> -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- <el-form-item label="公告类型">
            <el-radio-group v-model="formInline.radio2">
              <el-radio-button label="挂牌公告" />
              <el-radio-button label="拍卖公告" />
              <el-radio-button label="补充公告" />
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="登录名">
            <el-input v-model="formInline.user" placeholder="请输入登录名" />
          </el-form-item>
          <el-form-item label="统一社会信用代码">
            <el-input
              v-model="formInline.user"
              placeholder="请输入统一社会信用代码"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- </el-tab-pane>
          <el-tab-pane label="探矿权" name="second">Config</el-tab-pane>
        </el-tabs> -->
      </div>
    </el-card>
    <el-card>
      <div class="btn-list">
        <!-- <el-button type="primary" @click="cliAdd">新增</el-button> -->
      </div>

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="个人通知" name="second">
          <div class="btn-list">
            <el-button type="primary" @click="cliAdd">新增</el-button>
          </div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" fixed />
            <el-table-column type="index" label="序号" width="55" fixed />
            <el-table-column
              prop="date"
              label="消息主题"
              width="150"
              align="center"
              fixed
            />

            <el-table-column
              prop="address"
              label="接收人"
              width="150"
              align="center"
            />
            <el-table-column prop="address" label="消息内容" align="center" />
            <el-table-column
              prop="name"
              label="时间"
              width="150"
              align="center"
            />
            <el-table-column label="状态" width="150" align="center">
              <template #default="scope">
                <el-switch
                  v-model="scope.switch"
                  size="small"
                  active-text="开启"
                  inactive-text="关闭"
              /></template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template #default="scope">
                <div class="btn">
                  <el-button type="primary" @click="cliSelect">发送</el-button>
                  <el-button type="warning" @click="cliSelect">编辑</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="系统通知" name="first">
          <div class="btn-list">
            <el-button type="primary" @click="cliAdd">新增</el-button>
          </div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" fixed />
            <el-table-column
              prop="date"
              label="登录名"
              width="150"
              align="center"
              fixed
            />
            <el-table-column
              prop="name"
              label="用户名"
              width="150"
              align="center"
              fixed
            />
            <el-table-column
              prop="address"
              label="统一社会信用代码"
              width="150"
              align="center"
            />
            <el-table-column
              prop="address"
              label="联系电话"
              width="150"
              align="center"
            />
            <el-table-column
              prop="address"
              label="密码"
              width="150"
              align="center"
            />
            <el-table-column
              prop="address"
              label="邮箱"
              width="150"
              align="center"
            />
            <el-table-column
              prop="address"
              label="联系地址"
              width="150"
              align="center"
            />
            <!-- <el-table-column prop="address" label="发布时间" align="center" /> -->
            <!-- <el-table-column label="状态" width="150" align="center">
              <template #default="scope">
                <el-tag class="ml-2" type="success">审核通过</el-tag>
              </template>
            </el-table-column> -->
            <el-table-column
              prop="date"
              label="提交时间"
              width="150"
              align="center"
            />
            <el-table-column
              prop="date"
              label="审核时间"
              width="150"
              align="center"
            />
            <el-table-column label="操作" align="center" width="150">
              <template #default="scope">
                <div class="btn">
                  <el-button type="primary" @click="cliSelect">查看</el-button>
                  <!-- <el-button type="success" @click="cliSelect">同意</el-button>
                  <el-button type="danger">驳回</el-button> -->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
  <div v-show="dialogVisible">
    <el-card class="box-card" style="margin-bottom: 0">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div class="card-header">
            <span>基本信息</span>
          </div>
          <div>
            <el-button type="primary">保存</el-button>
            <el-button @click="dialogVisible = !dialogVisible">返回</el-button>
          </div>
        </div>
      </template>
      <el-form :model="formInline" class="formList">
        <el-form-item label="类型" class="formList-item">
          <el-select clearable placeholder="请选择">
            <el-option label="报名成功" value="报名成功" />
            <el-option label="竞价成功" value="竞价成功" />
          </el-select>
        </el-form-item>

        <el-form-item label="指定人" class="formList-item">
          <el-input v-model="formInline.user" placeholder="请输入指定人" />
        </el-form-item>
        <el-form-item label="厂家" class="formList-item">
          <el-input v-model="formInline.user" placeholder="请输入厂家" />
        </el-form-item>
        <el-form-item label="备注" class="formList-item">
          <el-input v-model="formInline.user" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin: 0 15px">
      <template #header>
        <div style="display: flex; justify-content: flex-start">
          <span>消息配置行</span>
        </div>
      </template>
      <el-table :data="tableData1" border style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="85"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="date"
          label="消息主题"
          width="180"
          align="center"
        />
        <el-table-column
          prop="name"
          label="接收人"
          width="180"
          align="center"
        />
        <el-table-column prop="address" label="消息内容" align="center" />
        <el-table-column prop="address" label="时间" align="center" />
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <!-- 新增 -->
  <!-- <el-dialog
    v-model="dialogVisible"
    title="通知信息内容"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="消息主题">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker type="datetime" placeholder="Select date and time" />
        </el-form-item>
        <el-form-item label="接收人">
          <el-input></el-input>
        </el-form-item>

        <el-form-item label="消息内容">
          <el-input :rows="5" type="textarea" placeholder="Please input" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          保 存
        </el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </template>
  </el-dialog> -->
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { ElMessageBox } from "element-plus";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
import type { TabsPaneContext } from "element-plus";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from "@element-plus/icons-vue";

const router = useRouter();
const activeName = ref("second");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 数据
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const cliAdd = () => {
  dialogVisible.value = true;
};

// 新增模态框
const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const form = reactive({
  name: "",
  value: "",
  time: "",
  radio: "挂牌公告",
});
const options = [
  {
    value: "采矿权",
    label: "采矿权",
  },
  {
    value: "探矿权",
    label: "探矿权",
  },
];

// 分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const formInline = reactive({
  radio1: "采矿权",
  radio2: "挂牌公告",
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};

const cliSelect = () => {
  dialogVisible.value = true;
  // router.push("/announcement/managementDetail");
};

// 表格数据
const tableData1 = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style lang="scss" scoped>
.el-card {
  margin: 15px;
}
.top-search {
  display: flex;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    margin-right: 5px;
  }
  // justify-content: space-around;
}
.demo-tabs {
  width: 100%;
}
.formList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &-item {
    width: 33%;
  }
}
</style>
